<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%- include common %>
        <style>
            .layui-layout-body {
                padding-top: 0;
            }

            .layz {
                margin-left: 10%;
            }

            .ul1 {
                width: 80%;
                border: 2px solid #eee;
                padding: 10px;
                margin-bottom: 20px;
            }

            .ul1 li {
                display: flex;
                margin-bottom: 20px;
                background-color: #eee;
                padding-left: 10px;
            }

            .ul1 li:nth-child(2n) {
                background-color: aqua;
            }


            .nam {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: coral;
                text-align: center;
                line-height: 50px;
                margin-top: 10px;
                font-size: 12px;
            }

            .neir {
                margin-left: 50px;
                width: 70%;
                line-height: 25px;
                padding: 10px;
            }

            #word {
                width: 75%;
                height: 10px;
                padding: 10px;
            }

            #sendbtn {
                width: 5%;
                height: 30px;
            }
        </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('head',{username:username})  %>
        
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layz" style="padding: 15px;">
                <h2><%- username%></h2>
                <ul class="ul1">
                    <li>
                        <div class="nam">
                            卡卡西
                        </div>
                        <div class="neir">
                            <p>10:20:39</p>
                            <p>我就看你拿到拉三等奖lasdj</p>
                        </div>
                    </li>
                    <li>
                        <div class="nam">
                            卡卡西
                        </div>
                        <div class="neir">
                            <p> 10:20:39</p>
                            <p>我就看你拿到拉三等奖lasdj</p>
                        </div>
                    </li>
                </ul>
                <input type="text" id="word">
                <button id="sendbtn">发送</button>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © 国际大酒店 layumen.com
        </div>
    </div>
    <!-- <script src="../src/layui.js"></script> -->
    <script>
        //JavaScript代码区域
        layui.use('element', function () {
            var element = layui.element;

        });
        document.querySelector('.layuiis1').onclick=function(){
            // open('/')
            location.href="/"
        }
        // # 创建 socket 对象
        // # 链接服务器端指定的端口
        // # 发送消息给服务器端
        // # 接收来自服务器的消息
        // # 监听服务器的 失去链接关闭

        //创建连接对象
        var ws = new WebSocket("ws://192.168.58.142:1458")

        //打开 第一次连接服务器
        ws.onopen = function () {
            console.log('连接成功---success');
            // $('.tip').hide();
            // $('#box').show()
        }
        //发送input框的文字 写键盘事件，按回车键可以发送
        function sendWord() {
            // ws.send(word.value)
            ws.send($('#word').val())
            $('#word').val('');
        }
        $('#sendbtn').click(() => {
            sendWord()
        })
        document.onkeypress = function (e) {
            if (e.keyCode == 13) {
                sendWord()
            }
        }

        // 点击连接 发送消息
        // $('#btn').click(function(){
        //     var myname = $("#nickname").val();
        //     ws.send('欢迎回来'+myname) //发送消息给服务端
        // })
        // if( $("#user").attr('data-name') != ''){
        //     upuser()
        // }
        // function upuser(){
        //         ws.send('欢迎回来'+$("#user").attr('data-name'))

        //     }
        // console.log($("#user").attr('data-name') );
        // //监听服务器异常
        ws.onerror = function () {
            console.log('服务器停止服务-服务异常');
        }
        //监听服务器关闭
        ws.onclose = function () {
            console.log('服务器已关闭');
        }
        //接收来自服务器的消息
        ws.onmessage = function (data) {
            console.log(data.data);
            var ds = data.data.split('#')
            console.log(ds);
            $(".ul1").append(` <li>
                        <div class="nam">
                            ${ds[0]}
                        </div>
                        <div class="neir">
                            <p> ${ds[1]}</p>
                            <p>${ds[2]} </p>
                        </div>
                    </li>`);
        }

    </script>
</body>

</html>